<template>

	<!-- 页面头部信息和设置图标，标题 -->
	<my-Back-search :yesSearch="false">
		<template #back>
			<ucs-svg width="28" height="28" src='<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 24 24">
					<g fill="none" stroke="#ff0000" stroke-linecap="round" stroke-width="2" data-swindex="0">
						<g>
							<path stroke-dasharray="4" stroke-dashoffset="4" d="M12 3V5">
								<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="4;0"></animate>
							</path>
							<path stroke-dasharray="28" stroke-dashoffset="28"
								d="M12 5C8.68629 5 6 7.68629 6 11L6 17C5 17 4 18 4 19H12M12 5C15.3137 5 18 7.68629 18 11L18 17C19 17 20 18 20 19H12">
								<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.4s" values="28;0">
								</animate>
							</path>
							<animateTransform attributeName="transform" begin="0.8s" dur="6s" keyTimes="0;0.05;0.15;0.2;1"
								repeatCount="indefinite" type="rotate" values="0 12 3;3 12 3;-3 12 3;0 12 3;0 12 3">
							</animateTransform>
						</g>
						<path stroke-dasharray="8" stroke-dashoffset="8"
							d="M10 20C10 21.1046 10.8954 22 12 22C13.1046 22 14 21.1046 14 20">
							<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="8;0"></animate>
							<animateTransform attributeName="transform" begin="1s" dur="6s" keyTimes="0;0.05;0.15;0.2;1"
								repeatCount="indefinite" type="rotate" values="0 12 8;6 12 8;-6 12 8;0 12 8;0 12 8">
							</animateTransform>
						</path>
					</g>
				</svg>'></ucs-svg>
		</template>
		<template #time>
			<view>مىنىڭ</view>
		</template>
		<template #search>
			<navigator url="/pages/geid/set/set">
				<uni-icons type="gear" size="28" color="#ff0000"></uni-icons>
			</navigator>
		</template>
	</my-Back-search>

	<!-- 一登陆 -->
	<view class="user">
		<view class="userImg">
			<image :src="users.userImg" style="width: 100%; height: 100%;"></image>
		</view>
		<view class="userID">
			<view style="padding: 8rpx 0;">{{ users.username }}</view>
			<view class="color">ئابونىت نومۇرى : ArTv{{ users.id }}</view>
			<view class="color">ئەزا ۋاقتى : {{ timeStatus }}</view>
		</view>
		<view @Click="userBtn" class="userBtn">
			<view>يىڭلاش</view>
		</view>
	</view>

	<!-- 会员中心-->
	<view class="setIcon" v-if="true">
		<view class="icon-flex">
			<view class="icon-test">ئەزا مەركىزى</view>
			<navigator open-type="switchTab" url="/pages/alpay/alpay" class="icon-bottom">ئىچىش</navigator>
		</view>

		<view>

		</view>
	</view>

	<!-- 分享与下载按钮 -->
	<view class="bottum">
		<!-- 收藏 -->
		<view @click="onCollent('/pages/geid/collent/collent')" class="bottum-flex">
			<view class="bottum-Bg">
				<uni-icons type="star" size="28" color="#fff"></uni-icons>
			</view>
			<view class="bottum-text">ساقلاش</view>
		</view>

		<!-- 推荐 -->
		<view @click="onCollent('/pages/geid/trailer/trailer')" class="bottum-flex">
			<view class="bottum-Bg">
				<uni-icons type="hand-up" size="28" color="#fff"></uni-icons>
			</view>
			<view class="bottum-text">تەۋسىيە</view>
		</view>

		<!-- 观看记录 -->
		<view @click="onCollent('/pages/geid/watch/watch')" class="bottum-flex">
			<view class="bottum-Bg">
				<uni-icons type="eye" size="28" color="#fff"></uni-icons>
			</view>
			<view class="bottum-text">خاتىرەم</view>
		</view>

		<!-- 钱包 -->
		<view @click="onCollent('/pages/geid/coins/coins')" class="bottum-flex">
			<view class="bottum-Bg">
				<uni-icons type="wallet" size="28" color="#fff"></uni-icons>
			</view>
			<view class="bottum-text">چىقىمدان</view>
		</view>

	</view>
	<!-- 观看历史 -->
	<view class="wchat">
		<max-title-min url="/pages/geid/watch/watch" :fontSize="26" title="كۆرۈش خاتىرىسى"
			text="تىخىمۇ كۆپ"></max-title-min>
		<view class="wchat-flex">
			<view class="total">
				<view>{{ WatchValue.length }}</view>
				<view style="font-size: 22rpx;">كۆرگەنلىرىم</view>
			</view>
			<view class="scroll-tou">
				<scroll-view class="scroll" scroll-x>
					<navigator class="scroll-nav" v-for="item in WatchValue"
						:url="`/pages/play/play?id=${item.collection[0].id}`">
						<view>
							<image style="width: 100%; height: 180rpx;" :src="item.collection[0].imageUrl"></image>
						</view>
						<view class="scroll-title">{{ item.collection[0].name }}</view>
					</navigator>
				</scroll-view>
			</view>
		</view>
	</view>
	<!-- 我的服务 -->
	<view class="wchat">
		<max-title-min :fontSize="32" :isIcon="false" title="مۇلازىمىتىم" text="更多"></max-title-min>
		<!-- 下列服务 -->

		<view class="fen-bottum" @click="showModal = true">
			<view> ئالاقىلىشىش</view>
			<view>
				<uni-icons size="15" color="#ff0000" type="back"></uni-icons>
			</view>
		</view>

		<view class="fen-bottum" @click.stop="openImg">
			<view>ئەپچاقنى ھەمبەھىرلەش</view>
			<view>
				<uni-icons size="15" color="#ff0000" type="back"></uni-icons>
			</view>
		</view>

		<view class="fen-bottum" @Click="onVersion">
			<view>ئەپچاق ھەققىدە</view>
			<view>
				<uni-icons size="15" color="#ff0000" type="back"></uni-icons>
			</view>
		</view>

		<view class="fen-img">
			<view>
				<img style="width: 100%; height: 100%;box-sizing: border-box; padding: 30rpx;"
					src="/static/servise.png"></img>
			</view>
		</view>
		<view style="font-size: 20rpx;text-align: center; color: #464646;">virsion2025.0001.1.0.0</view>
	</view>

	<Modal v-model:show="showModal" title="ئالاقىلىشىش">
		<p>ئاستىدىكى ئىككىلىك كودنى بىسىپ تۇرۇپ سىكانىرلاپ مۇلازىمەتچى بىلەن ئالاقىلىشىڭ !</p>
	</Modal>

	<view>
		<!-- 海报 -->
		<!-- 海报生成器 -->
		<piaoyi-poster ref="piaoyiPostor" @temp-file-path="tempFilePath" :img-image="img" :shop-name="shopName"
			:title="title" :detail="detail" :imgImage="users.userImg" yurts="دۆلىتىمىز" :qrImage="qrImage"
			years="2025" />

		<!-- 通用二维码生成器 -->
		<QRLightGenerator ref="Generator" :url="targetUrl" :icon="logoIcon" @generated="onQRGenerated"
			@cleared="onQRCleared" />

		<!-- 展示生成后的海报图 v-if="posterIf"-->
		<view class="poster-img" @touchmove.stop v-if="posterIf">
			<view class="poster-icon">
				<navigator url="/pages/geid/coins/coins">
					<uni-icons type="help" size="30" color="#ff0000"></uni-icons>
				</navigator>
				<view>

				</view>

				<view @click.stop="posterClose">
					<uni-icons type="close" size="30" color="#ff0000"></uni-icons>
				</view>
			</view>
			<!-- :src="img" -->
			<view style="width: 80%;height: 55%;">
				<image :src="img" style="width: 100%;height: 100%;" show-menu-by-longpress></image>
			</view>
			<!-- 导航 -->
			<view class="share">
				<view class="share-content">بۇ رەسىمنى بىسىپ تۇرۇپ ساقلىۋىلىپ ، باشقىلارغا ئەۋەتىش ئارقىلىق
					كىرىم
					قىلىۋىلىڭ</view>
			</view>

		</view>

	</view>

</template>
<script setup>
import {
	ref
} from 'vue';
import {
	collectionWath,
	loginById
} from '@/API/geidApis.js';

const WatchValue = ref([]);  //观看记录
const users = ref({});
const timeStatus = ref('2020-09-09 12:12');


// 弹出分享图片形成函数列表
import piaoyiPoster from '@/components/piaoyi-poster/piaoyi-poster.vue'
import QRLightGenerator from '@/components/tki-qrcode/QRTripGenerator.vue';
const targetUrl = ref('https://min.erkantv.cn/');

const logoIcon = ref('/static/logo.png') // 可选：二维码中间的图标
// ========== 组件引用 ==========
const piaoyiPostor = ref(); //绘制ref
const Generator = ref(); //形成通用码ref
// ========== 响应式数据 ==========
const img = ref(null)
const title = ref('ikran 影视厅')
const detail = ref('سۈزۈكلىكى يۇقرى ، تولوق ، ئەڭ يىڭى مەزمۇنلار')
const price = ref(95)
const shopName = ref('ئەڭ يىڭى سۈزۈك كىنولار')
const qrImage = ref();
const posterIf = ref(false)
const loadings = ref(false)

// 观看记录
const watchFunction = async () => {
	let user = uni.getStorageSync("user");
	timeStatus.value = formatTimestamp(user.statusCreate);
	users.value = user;
	let res = await collectionWath(1, user.id);
	WatchValue.value = res.list;
	console.log("观看记录内容：", res);

}
// 观看记录
watchFunction();

// 时间码转换
function formatTimestamp(timestamp) {
	const date = new Date(timestamp);
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
	const day = String(date.getDate()).padStart(2, '0');
	const hour = String(date.getHours()).padStart(2, '0');
	const minute = String(date.getMinutes()).padStart(2, '0');

	return `${year}-${month}-${day} ${hour}:${minute}`;
}


// 收藏页面
function onCollent(url) {
	uni.navigateTo({
		url: url
	})
}

// 重新登录
const userBtn = async () => {
	uni.showLoading({
		title: 'يىڭلىنىۋاتىدۇ...'
	});
	let res = await loginById(users.value.id);
	uni.hideLoading();
	uni.removeStorageSync("user");
	console.log("观看记录内容：", res);
	uni.setStorageSync("user", res);
	users.value = {};
	users.value = res;
	timeStatus.value = formatTimestamp(res.statusCreate);
}


import Modal from '@/components/Modal/index.vue'
const showModal = ref(false)

// 关于小程序
function onVersion() {
	uni.navigateTo({
		url: '/pages/geid/verison/verison'
	})
}

// ========== 方法定义 ==========
const openImg = async () => {
	let user = uni.getStorageSync("user");
	const userId = ref(user.id);
	uni.showLoading({
		title: "正在生成中..."
	})
	try {

		// 生成二维码
		const qrCodePath = await Generator.value?.generateQR();
		console.log("二维码生成成功，路径:", qrCodePath);

		// 延迟一小段时间，确保二维码图片已经完全生成
		await new Promise(resolve => setTimeout(resolve, 300));

		uni.hideLoading();
		// 打开海报
		piaoyiPostor.value?.open();
	} catch (error) {
		// 二维码生成失败
		console.error("生成二维码失败:", error);
		uni.hideLoading();
		uni.showToast({
			title: '生成失败',
			icon: 'none'
		});
	}

	// 容错处理：如果3秒后海报还没显示，则重试一次
	setTimeout(() => {
		if (!posterIf.value) {
			console.log("海报未显示，尝试重试");
			piaoyiPostor.value?.open();
		}
	}, 3000);


}



function tempFilePath(filePath) {
	console.log("海报地址：", filePath);
	if (filePath) {
		img.value = filePath
		posterIf.value = true;
	}

}

function posterClose() {
	posterIf.value = false;
	uni.hideLoading();
}
// 通用码返回的临时地址
const onQRGenerated = (path) => {
	console.log('父页面收到二维码图片路径:', path);
	qrImage.value = path; // 保存路径，可用于预览、上传等
	console.log('通用码生成成功:', path)
};
// 海报处理函数
function shareImgFunction(index) {
	let imgPath = img.value;
	console.log("海报临时地址：", imgPath);
	saveImageToPhotos(imgPath);
}
</script>

<style scoped lang="scss">
.user {
	width: 92%;
	position: relative;
	left: 4%;
	padding: 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	background: #1d1d1d;
	border-radius: 20rpx;
	box-shadow: 0 10rpx 20rpx rgba(255, 0, 0, 0.2);
	direction: rtl;

	.userImg {
		width: 150rpx;
		height: 150rpx;
		border-radius: 20rpx;
		overflow: hidden;

	}

	.userID {
		padding: 0 30rpx;

		.color {
			color: #969696;
			padding: 8rpx 0;
			font-size: 23rpx;
		}
	}

	.userBtn {
		position: relative;
		left: -20rpx;
		background-color: rgba(254, 0, 0, 0.3);
		color: #ff0000;
		padding: 8rpx 15rpx;
		border-radius: 15rpx;
		font-size: 22rpx;
	}
}

.setIcon {
	margin-top: 30rpx;
	background-color: #ff0000;
	width: 92%;
	position: relative;
	left: 4%;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
	border-radius: 20rpx;
	box-shadow: 0 10rpx 20rpx rgba(255, 0, 0, 0.2);


	.icon-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.icon-test {
			font-weight: bold;
			font-size: 28rpx;
		}

		.icon-bottom {
			font-size: 22rpx;
			background: #1d1d1d;
			color: #ff0000;
			padding: 5rpx 20rpx;
			border-radius: 30rpx;
			animation: pulse 1.2s ease-in-out infinite both;
		}

		@keyframes pulse {
			0% {
				transform: scale(1);
				border-color: #fff;
				box-shadow: 0 0 12rpx transparent;
			}

			50% {
				transform: scale(1.03);
				border-color: #fff;
				box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.6);
			}

			100% {
				transform: scale(1);
				border-color: #fff;
				box-shadow: 0 0 12rpx transparent;
			}
		}

	}

}

.bottum {
	box-sizing: border-box;
	padding: 30rpx 60rpx;
	padding-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;

	.bottum-flex {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.bottum-Bg {
		background: $App-title-color;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70rpx;
		height: 70rpx;
		border-radius: 15rpx;
		margin-bottom: 10rpx;
	}

	.bottum-text {
		font-size: 22rpx;
	}
}

.wchat {
	background: #1d1d1d;
	margin-top: 30rpx;
	width: 92%;
	position: relative;
	left: 4%;
	padding: 10rpx 0 30rpx 0;
	box-sizing: border-box;
	border-radius: 20rpx;
	box-shadow: 0 10rpx 20rpx rgba(255, 0, 0, 0.2);

	.wchat-flex {
		display: flex;
		align-items: center;
		width: 100%;
		overflow: hidden;
		direction: rtl;
	}

	.total {
		margin-left: 20rpx;
		margin-right: 10rpx;
		margin-bottom: 20rpx;
		width: 23%;
		height: 200rpx;
		background: red;
		border-radius: 15rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.scroll ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}

	.scroll-tou {
		width: 77%;
	}

	.scroll {
		white-space: nowrap;

		.scroll-nav {
			white-space: nowrap;
			margin-right: 15rpx;
			display: inline-block;
			width: 130rpx;
			height: 220rpx;
			border-radius: 15rpx;
			overflow: hidden;

			.scroll-title {
				font-size: 20rpx;
				padding: 0 5rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

			}

		}
	}
}

.fen-bottum {
	box-sizing: border-box;
	padding: 30rpx;
	font-size: 25rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	direction: rtl;

}

.poster-img {
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 1000;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.8);
	overflow: hidden;

	.poster-icon {
		width: 100%;
		display: flex;
		position: relative;
		box-sizing: border-box;
		padding: 20rpx 50rpx;
		align-items: center;
		justify-content: space-between;
	}

	.share {
		width: 90%;
		position: relative;
		z-index: 100;
		margin-top: 40rpx;
		border-radius: 20rpx;
		background-color: #ff0000;
		text-align: center;
		direction: rtl;

		.share-content {
			padding: 20rpx;
			box-sizing: border-box;
		}
	}
}
</style>